<template>
	<div class="app-container">
		<div class="flex flex-wrap">
			<div class="flex items-center marginRB10">
				<span class="w-30 text-right">动态ID：</span>
				<el-input v-model="listQuery.id" clearable placeholder="请输入动态ID" style="width:220px;"></el-input>
            </div>
			
			<div class="flex items-center marginRB10">
				<span class="w-30 text-right">发布人ID：</span>
				<el-input v-model="listQuery.user_id" clearable placeholder="请输入发布人ID" style="width:220px;"></el-input>
            </div>
            <div class="flex items-center marginRB10">
				<span class="w-30 text-right">群号：</span>
				<el-input v-model="listQuery.group_code" clearable placeholder="请输入群号" style="width:220px;"></el-input>
            </div>
			<div class="flex items-center marginRB10">
				<span class="w-30 text-right">发布时间：</span>
				<el-date-picker
				v-model="start_time"
				class="mr-5"
				clearable
				end-placeholder="选择发布结束时间"
				range-separator="-"
				start-placeholder="选择发布开始时间"
				type="datetimerange"
				value-format="timestamp"
				@change="handleChangeDate"
				>
				</el-date-picker>
            </div>
			<div class="flex items-center marginRB10">
				<el-button type="primary" size="default" @click="getList();listQuery.page = 1;">查 询</el-button>
				<el-button size="default" @click="handleReset" plain>重 置</el-button>
            </div>
		</div>

		<el-table :data="tableData" border stripe>
			<el-table-column v-for="col in columns"
				:prop="col.property"
				:key="col.id"
				:label="col.label"
				:width="col.width"
				:sortable="col.property === 'time'">
				<template slot-scope="scope">
					<span v-if="col.property === 'media'">
						<div v-for="(item, index) in scope.row[col.property]" :key="index" style="margin-right: 5px;display: inline-block;">
							<el-image
								v-if="item.type === 1"
								style="width: 100px; height: 100px;"
								:src="item.url" 
								:preview-src-list="scope.row['srcList']">
								<div slot="error" class="image-slot"></div>
							</el-image>
							<video v-else :src="item.url" controls></video>
						</div>
					</span>
					<span v-else-if="col.property === 'context'">
						<span>{{scope.row[col.property][0].text}}</span>
					</span>
                    <span v-else-if="col.property === 'content'">
                        <span class="overflow-ellipsis" :class="scope.row.isEllipsis ? 'textLength' : ''">{{scope.row[col.property]}}</span>
                        <span v-if="scope.row.isEllipsis" @click="scope.row.isEllipsis = !scope.row.isEllipsis" class="text-blue-500 cursor-pointer">展开</span>
                        <span v-if="!scope.row.isEllipsis" @click="scope.row.isEllipsis = !scope.row.isEllipsis" class="text-blue-500 cursor-pointer">收起</span>
					</span>
					<span v-else>{{scope.row[col.property]}}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" fixed="right">
				<template slot-scope="scope">
					<el-button @click="handleCheck(scope.row)" type="text" size="small">查看</el-button>
					<el-button @click="handleDelete(scope.row)" type="text" style="color: #f56c6c;" size="small">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<cus-pagination v-show="total>0" :limit.sync="listQuery.perPage" :page.sync="listQuery.page" :total="total" @pagination="getList" />
		
		<!-- 删除动态 -->
		<el-dialog
			title="删除动态"
			:visible.sync="dialogVisible"
			width="30%"
			@close="handleCloseDialog">
			
            <div class="flex">
                <div class="flex-1">
                    <p class="mb-4">
                        <span>动态ID：</span>
                        <span>{{dynamicDetail.id}}</span>
                    </p>
                    <p class="mb-4">
                        <span>发布人ID：</span>
                        <span>{{dynamicDetail.user_code}}</span>
                    </p>
                    <p class="mb-4">
                        <span>发布时间：</span>
                        <span>{{dynamicDetail.created_format}}</span>
                    </p>
                    <p class="mb-4">
                        <span>群聊名称：</span>
                        <span>{{dynamicDetail.group_name}}</span>
                    </p>
                    <p class="mb-4">
                        <span>群号：</span>
                        <span>{{dynamicDetail.group_code}}</span>
                    </p>
                </div>
                <div class="flex-1 mb-4">
                    <div class="flex items-center mb-4">
                        <el-image :src="dynamicDetail.user_head_picture" fit="fill" class="rounded-full h-24 w-24">
							<div slot="error" class="image-slot">
								<i class="el-icon-picture-outline"></i>
							</div>
						</el-image>
                        <span class="ml-2">{{dynamicDetail.user_nickname}}</span>
                    </div>
                    <p class=" mb-4">{{dynamicDetail.context[0].text}}</p>
                    <div class="flex flex-wrap">

						<div v-for="(item, index) in dynamicDetail.media" :key="index" style="margin-right: 5px;">
							<el-image
								v-if="item.type === 1"
								style="width: 100px; height: 100px;"
								:src="item.url" 
								:preview-src-list="dynamicDetail.srcList">
								<div slot="error" class="image-slot">
									<i class="el-icon-picture-outline"></i>
								</div>
							</el-image>
							<video v-else :src="item.url" controls></video>
						</div>
					</div>
                </div>
            </div>
			
			<span slot="footer">
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="danger" @click="handleConfirm">删除</el-button>
			</span>
		</el-dialog>
		

		<!-- 详情 -->
		<el-dialog
			title="群动态详情"
			:visible.sync="detailDialogVisible"
			width="30%"
			@close="handleCloseDialog">
			<div class="flex">
                <div class="flex w-2/4 mb-4">
                    <span class="w-32 text-right">发布人头像：</span>
                    <el-image :src="dynamicDetail.user_head_picture" fit="fill" :lazy="true" class="rounded-full h-20 w-20">
						<div slot="error" class="image-slot"></div>
					</el-image>
                </div>
                <div class="flex items-center w-2/4 mb-4">
                    <span class="w-32 text-right">群聊名称：</span>
                    <span>{{dynamicDetail.group_name}}</span>
                </div>
            </div>
            <div class="flex">
                <div class="flex items-center w-2/4 mb-4">
                    <span class="w-32 text-right">发布人昵称：</span>
                    <span>{{dynamicDetail.user_nickname}}</span>
                </div>
                <div class="flex items-center w-2/4 mb-4">
                    <span class="w-32 text-right">群号：</span>
                    <span>{{dynamicDetail.group_code}}</span>
                </div>
            </div>
            <div class="flex items-center w-2/4 mb-4">
                <span class="w-32 text-right">动态ID：</span>
                <span>{{dynamicDetail.id}}</span>
            </div>
            <div class="flex items-center w-2/4 mb-4">
                <span class="w-32 text-right">发布人ID：</span>
                <span>{{dynamicDetail.user_code}}</span>
            </div>
            <div class="flex items-center w-2/4 mb-4">
                <span class="w-32 text-right">发布时间：</span>
                <span>{{dynamicDetail.created_format}}</span>
            </div>
            <div class="flex mb-4">
                <span class="w-32 text-right">动态文字：</span>
                <span class="w-2/3">{{dynamicDetail.context[0].text}}</span>
            </div>
            <div class="flex mb-4">
                <span class="w-32 text-right">动态图片/视频：</span>
				<div class="flex flex-wrap w-2/3">

					<div v-for="(item, index) in dynamicDetail.media" :key="index" style="margin-right: 5px;">
						<el-image
							v-if="item.type === 1"
							style="width: 100px; height: 100px;"
							:src="item.url" 
							:preview-src-list="dynamicDetail.srcList">
							<div slot="error" class="image-slot">
								<i class="el-icon-picture-outline"></i>
							</div>
						</el-image>
						<video v-else :src="item.url" controls></video>
					</div>
				</div>
            </div>
			
			<span slot="footer">
				<el-button @click="detailDialogVisible = false">返回</el-button>
				<el-button type="danger" @click="handleDelete2">删除</el-button>
			</span>
		</el-dialog>
		
		
	</div>
</template>

<script>
import {
  groupDynamic
} from '@/api/groupChat/groupDynamicList'
export default {
	name: 'groupDynamicList',
	data() {
		return {
			dynamicDetail: {
				context: [{}],
				media: []
			},
			start_time: '',
			detailDialogVisible: false,
			dialogVisible: false,
			total: 0,
			listQuery: {
				page: 1,
				perPage: 10
			},
			tableData: [],
			columns: [
				{
					id: 1,
					label: '动态ID',
					property: 'id',
					width: 'auto'
				},
				{
					id: 2,
					label: '发布人ID',
					property: 'user_code',
					width: 'auto'
				},
				{
					id: 3,
					label: '动态内容',
					property: 'context',
					width: '200'
				},
				{
					id: 4,
					label: '动态图片/视频',
					property: 'media',
					width: 340
				},
				{
					id: 5,
					label: '发布时间',
					property: 'created_format',
					width: 'auto'
				},
				{
					id: 6,
					label: '群聊名称',
					property: 'group_name',
					width: 'auto'
				},
				{
					id: 7,
					label: '群号',
					property: 'group_code',
					width: 'auto'
				}
			],
			successInfo: {
				code: '1122',
				name: '',
				password: ''
			},
			dynamic_id: ''
		}
	},
	mounted() {
		this.getList()
	},
	methods: {
		getList() {
			this.listLoading = true
			for (let key in this.listQuery) {
				this.listQuery[key] = this.listQuery[key] === '' ? undefined : this.listQuery[key]
			}
			groupDynamic(this.listQuery, 'get').then(({ data }) => {
				data.list.map((item) => {
					item.srcList = []
					item.media.map(elem => {
						item.srcList.push(elem.url)
					})
				})
				this.tableData = data.list
				this.total = data.meta.total
				this.listLoading = false
				this.confirmBtn = false
			})
		},
		groupDynamicDetail(data) {
			groupDynamic({
				dynamic_id: data
			}, 'get').then(({ data }) => {
				data.srcList = []
				data.media.forEach(element => {
					if(element.type === 1) {
						data.srcList.push(element.url)
					}
				});
				this.dynamicDetail = data
			})
		},
		handleCheck(row) {
			this.dynamic_id = row.id
			this.groupDynamicDetail(this.dynamic_id)
			this.detailDialogVisible = true
		},
		handleModification() {},
        handleDelete(row) {
			this.dynamic_id = row.id
			this.groupDynamicDetail(this.dynamic_id)
			this.dialogVisible = true
        },
		handleReset() {
			this.listQuery = {
				page: 1,
				perPage: 10
			}
			this.start_time = ''
			this.getList()
        },
		handleConfirm() {
			groupDynamic({
				dynamic_id: this.dynamic_id
			}, 'delete').then(({ code }) => {
				if(code === 200) {
					this.$message({
						type: 'success',
						message: '操作成功'
					})
					this.getList()
					this.dialogVisible = false
					this.detailDialogVisible = false
				}else{
					this.$message({
						type: 'error',
						message: '操作失败'
					})
				}
			})
		},
		handleCloseDialog() {
			this.dynamicDetail = {
				context: [{}],
				media: []
			}
		},
        handleAvatarSuccess(res, file) {
			console.log(file)
			this.imageUrl = URL.createObjectURL(file.raw)
		},
		beforeAvatarUpload(file) {
			const isJPG = file.type === 'image/jpeg';
			const isLt2M = file.size / 1024 / 1024 < 2;
			console.log(file)
		},
        handleDelete2() {
            this.$confirm('<p style="font-size: 16px;"><span class="el-icon-question" style="padding-right: 5px;color: #FF9900;font-size: 16px;"></span>确定删除？<p style="color: #606266;font-size: 14px;margin-left: 20px;">是否删除该条群动态？</p></p>', '', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				showClose: false,
				dangerouslyUseHTMLString: true
			}).then(() => {
				this.handleConfirm()
			})
			.catch(() => {
				this.$message({
					type: 'info',
					message: '已取消'
				})
			})
        },
		handleChangeDate(value) {
			if (value) {
				this.listQuery.start_time = value[0] / 1000
				this.listQuery.end_time = value[1] / 1000
			} else {
				this.listQuery.start_time = undefined
				this.listQuery.end_time = undefined
			}
		},
	},
}
</script>

<style lang="scss" scoped>
.textLength{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /*3表示只显示3行*/
    /* autoprefixer: off */ 
    -webkit-box-orient: vertical;
}
</style>